<template>
  <div class="permission-form">
    <el-form ref="ForgetPasswordVO" :model="ForgetPasswordVO" :rules="ForgetPasswordVO_Rules" hide-required-asterisk>
      <el-row>
        <el-col :span="18">
          <div class="title-container">
            <h3 class="title">{{ $t('forget.title') }}</h3>
          </div>
        </el-col>
        <el-col :span="6" align="right">
          <el-button type="text" @click="routerRedirect()">→ {{ $t('forget.back') }}</el-button>
        </el-col>
      </el-row>
      <el-form-item prop="phone">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input v-model="ForgetPasswordVO.phone" :placeholder="$t('rules.userName')" />
      </el-form-item>
      <el-button :loading="loading" type="primary" class="confirm" @click="resetPassword('ForgetPasswordVO')">{{ $t('forget.butext') }}</el-button>
    </el-form>
    <el-dialog :title="$t('verification.verification')" :visible.sync="showVerify" width="30%" center>
      <verify :is-show-go-back="isShowBack" @showVerifyCodeModel="showVerifyCodeModel" />
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { ForgetPasswordVO_Rules } from '@/lib/validate/forgetPassword/index.js';
import { RegisterUserInput } from '@/lib/form/swaggerForm.js';
import verify from '@/components/VerifyCode/index';
export default {
  name: 'ForgetPassword',
  components: { verify },
  data() {
    return {
      ForgetPasswordVO_Rules: new ForgetPasswordVO_Rules(),
      ForgetPasswordVO: new RegisterUserInput(),
      loading: false,
      showVerify: false, // 控制二次验证弹窗
      isShowBack: false // 隐藏二次验证弹窗的返回按钮
    };
  },
  computed: {
    ...mapState({ // 获取登录的手机号码
      markTelephone: state => state.app.markTelephone
    })
  },
  created() { // 获取登录的手机号码
    this.ForgetPasswordVO.phone = this.markTelephone;
  },
  methods: {
    // 手机号正确弹出二次验证
    resetPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.showVerify = true;
        } else {
          return false;
        }
      });
    },
    // 获取二次验证结果，成功后发送短信验证码显示Verification组件
    showVerifyCodeModel (Verify) {
      // console.log(Verify);
      const isVerify = Verify.isVerifyCode;
      if (isVerify) {
        // 发送验证码
        // TODO
        this.loading = true;
        this.$emit('forget', false);
        this.showVerify = false;
      }
    },
    // 返回登录
    routerRedirect() {
      this.$router.push({
        name: 'login',
        query: this.$route.query,
        params: this.$route.params
      });
    }
  }
};
</script>
<style scoped>
.confirm {
  width: 100%;
}
</style>
